<?php
/**
 * Created by PhpStorm.
 * User: Pico_Dragon
 * Date: 16/12/2014
 * Time: 17:13
 */ ?>
<div class="content">
<!---start-services-->
<div class="gallery1">
<div class="wrap">
<!--<h1>Our<span>Gallery</span></h1>-->
<div class="clear"> </div>
<div class="container">

<ul id="filters" class="clearfix">
    <li><span class="filter active" data-filter="app card icon logo web">Dạo phố</span></li>
    <li><span class="filter" data-filter="app">Album1</span></li>
    <li><span class="filter" data-filter="card">Album2</span></li>
    <li><span class="filter" data-filter="icon">Album3</span></li>
    <li><span class="filter" data-filter="logo">Album4</span></li>
    <li><span class="filter" data-filter="web">Album5</span></li>
</ul>
<div class="clear"></div>
<div id="portfoliolist">

<div class="portfolio logo1" data-cat="logo">
    <div class="portfolio-wrapper">
        <a href="web/images/s1.jpg" class="flipLightBox">
            <img src="web/images/s1.jpg"  alt="Image 2" />
        </a>
        <div class="label">
            <div class="label-text">
                <a class="text-title">Bird Document</a>
                <span class="text-category">Logo</span>
            </div>
            <div class="label-bg"></div>
        </div>
    </div>
</div>

<div class="portfolio app" data-cat="app">
    <div class="portfolio-wrapper">
        <a href="web/images/s4.jpg" class="flipLightBox">
            <img src="web/images/s2.jpg"  alt="Image 2" />
        </a>
        <div class="label">
            <div class="label-text">
                <a class="text-title">Visual Infography</a>
                <span class="text-category">APP</span>
            </div>
            <div class="label-bg"></div>
        </div>
    </div>
</div>

<div class="portfolio web" data-cat="web">
    <div class="portfolio-wrapper">
        <a href="web/images/s3.jpg" class="flipLightBox">
            <img src="web/images/s3.jpg"  alt="Image 2" />
        </a>
        <div class="label">
            <div class="label-text">
                <a class="text-title">Sonor's Design</a>
                <span class="text-category">Web design</span>
            </div>
            <div class="label-bg"></div>
        </div>
    </div>
</div>

<div class="portfolio card" data-cat="card">
    <div class="portfolio-wrapper">
        <a href="web/images/s1.jpg" class="flipLightBox">
            <img src="web/images/s1.jpg"  alt="Image 2" />
        </a>
        <div class="label">
            <div class="label-text">
                <a class="text-title">Typography Company</a>
                <span class="text-category">Business card</span>
            </div>
            <div class="label-bg"></div>
        </div>
    </div>
</div>

<div class="portfolio app" data-cat="app">
    <div class="portfolio-wrapper">
        <a href="web/images/s1.jpg" class="flipLightBox">
            <img src="web/images/s1.jpg"  alt="Image 2" />
        </a>
        <div class="label">
            <div class="label-text">
                <a class="text-title">Weatherette</a>
                <span class="text-category">APP</span>
            </div>
            <div class="label-bg"></div>
        </div>
    </div>
</div>

<div class="portfolio card" data-cat="card">
    <div class="portfolio-wrapper">
        <a href="web/images/s2.jpg" class="flipLightBox">
            <img src="web/images/s2.jpg"  alt="Image 2" />
        </a>
        <div class="label">
            <div class="label-text">
                <a class="text-title">BMF</a>
                <span class="text-category">Business card</span>
            </div>
            <div class="label-bg"></div>
        </div>
    </div>
</div>

<div class="portfolio card" data-cat="card">
    <div class="portfolio-wrapper">
        <a href="web/images/s3.jpg" class="flipLightBox">
            <img src="web/images/s3.jpg"  alt="Image 2" />
        </a>
        <div class="label">
            <div class="label-text">
                <a class="text-title">Techlion</a>
                <span class="text-category">Business card</span>
            </div>
            <div class="label-bg"></div>
        </div>
    </div>
</div>

<div class="portfolio logo1" data-cat="logo">
    <div class="portfolio-wrapper">
        <a href="web/images/s1.jpg" class="flipLightBox">
            <img src="web/images/s1.jpg"  alt="Image 2" />
        </a>
        <div class="label">
            <div class="label-text">
                <a class="text-title">KittyPic</a>
                <span class="text-category">Logo</span>
            </div>
            <div class="label-bg"></div>
        </div>
    </div>
</div>

<div class="portfolio app" data-cat="app">
    <div class="portfolio-wrapper">
        <a href="web/images/s2.jpg" class="flipLightBox">
            <img src="web/images/s2.jpg"  alt="Image 2" />
        </a>
        <div class="label">
            <div class="label-text">
                <a class="text-title">Graph Plotting</a>
                <span class="text-category">APP</span>
            </div>
            <div class="label-bg"></div>
        </div>
    </div>
</div>

<div class="portfolio card" data-cat="card">
    <div class="portfolio-wrapper">
        <img src="web/images/s1.jpg" alt="" />
        <div class="label">
            <div class="label-text">
                <a class="text-title">QR Quick Response</a>
                <span class="text-category">Business card</span>
            </div>
            <div class="label-bg"></div>
        </div>
    </div>
</div>

<div class="portfolio logo1" data-cat="logo">
    <div class="portfolio-wrapper">
        <img src="web/images/s3.jpg" alt="" />
        <div class="label">
            <div class="label-text">
                <a class="text-title">Mobi Sock</a>
                <span class="text-category">Logo</span>
            </div>
            <div class="label-bg"></div>
        </div>
    </div>
</div>

<div class="portfolio logo1" data-cat="logo">
    <div class="portfolio-wrapper">
        <img src="web/images/s1.jpg" alt="" />
        <div class="label">
            <div class="label-text">
                <a class="text-title">Village Community Church</a>
                <span class="text-category">Logo</span>
            </div>
            <div class="label-bg"></div>
        </div>
    </div>
</div>

<div class="portfolio icon" data-cat="icon">
    <div class="portfolio-wrapper">
        <img src="web/images/s2.jpg" alt="" />
        <div class="label">
            <div class="label-text">
                <a class="text-title">Domino's Pizza</a>
                <span class="text-category">Icon</span>
            </div>
            <div class="label-bg"></div>
        </div>
    </div>
</div>

<div class="portfolio web" data-cat="web">
    <div class="portfolio-wrapper">
        <img src="web/images/s1.jpg" alt="" />
        <div class="label">
            <div class="label-text">
                <a class="text-title">Backend Admin</a>
                <span class="text-category">Web design</span>
            </div>
            <div class="label-bg"></div>
        </div>
    </div>
</div>

<div class="portfolio icon" data-cat="icon">
    <div class="portfolio-wrapper">
        <img src="web/images/s2.jpg" alt="" />
        <div class="label">
            <div class="label-text">
                <a class="text-title">Instagram</a>
                <span class="text-category">Icon</span>
            </div>
            <div class="label-bg"></div>
        </div>
    </div>
</div>

<div class="portfolio web" data-cat="web">
    <div class="portfolio-wrapper">
        <a href="web/images/s3.jpg" class="flipLightBox">
            <img src="web/images/s1.jpg"  alt="Image 2" />
        </a>
        <div class="label">
            <div class="label-text">
                <a class="text-title">Student Guide</a>
                <span class="text-category">Web design</span>
            </div>
            <div class="label-bg"></div>
        </div>
    </div>
</div>
</div>
<script type="text/javascript" src="web/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="web/js/jquery.mixitup.min.js"></script>
<script type="text/javascript">
    $(function () {

        var filterList = {

            init: function () {

                // MixItUp plugin
                // http://mixitup.io
                $('#portfoliolist').mixitup({
                    targetSelector: '.portfolio',
                    filterSelector: '.filter',
                    effects: ['fade'],
                    easing: 'snap',
                    // call the hover effect
                    onMixEnd: filterList.hoverEffect()
                });

            },

            hoverEffect: function () {

                // Simple parallax effect
                $('#portfoliolist .portfolio').hover(
                    function () {
                        $(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
                        $(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');
                    },
                    function () {
                        $(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
                        $(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');
                    }
                );

            }

        };

        // Run the show!
        filterList.init();


    });
</script>
</div><!-- container -->
<script type="text/javascript" src="web/js/fliplightbox.min.js"></script>
<script type="text/javascript">$('body').flipLightBox()</script>
<div class="clear"> </div>
</div>
</div>
<!---End-about-->
<!---End-content-->
</div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
<!---start-footer-->
<div class="footer">
    <div class="wrap">
        <div class="footer-left">
            <a href="index.php">NATUREX</a>
        </div>
        <div class="footer-right">
            <p>Design by <a href="http://w3layouts.com/">W3layouts</a></p>
            <script type="text/javascript">
                $(document).ready(function() {
                    /*
                     var defaults = {
                     containerID: 'toTop', // fading element id
                     containerHoverID: 'toTopHover', // fading element hover id
                     scrollSpeed: 1200,
                     easingType: 'linear'
                     };
                     */

                    $().UItoTop({ easingType: 'easeOutQuart' });

                });
            </script>
            <a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a>
        </div>
        <div class="clear"> </div>
    </div>
</div>
<!---End-footer-->
<!---End-wrap-->